import React from 'react'
import PropTypes from 'prop-types'
import { routerRedux } from 'dva/router'
import { connect } from 'dva'
import { sexTypeData } from 'utils/seletLocalData'
import { Row, Col, Button, Popconfirm, Form, Input, Select, Radio, DatePicker } from 'antd'
import { converDate } from 'utils'
import { Page } from 'components'
import queryString from 'query-string'
import styles from '../../../themes/global.less'
import Modal from './Modal'
import moment from 'moment'

const FormItem = Form.Item
const Option = Select.Option
const RadioGroup = Radio.Group

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}

const SysUserDetail = ({ location, dispatch, sysUserDetail, loading, form: { getFieldDecorator, validateFields, getFieldsValue } }) => {
  const dateFormat = 'DD/MM/YYYY'
  location.query = queryString.parse(location.search)
  const { data, modalVisible } = sysUserDetail
  const modalProps = {
    item: data,
    visible: modalVisible,
    width: 500,
    maskClosable: false,
    confirmLoading: loading.effects['sysUserDetail/update'],
    title: 'Change PassWord',
    wrapClassName: 'vertical-center-modal',
    onOk (payload) {
      dispatch({
        type: 'sysUserDetail/changePassword',
        payload,
      })
    },
    onCancel () {
      dispatch({
        type: 'sysUserDetail/hideModal',
      })
    },
  }

  const handleUpdate = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const formData = {
        ...getFieldsValue(),
      }
      // data.address = data.address.join(' ')
      dispatch({
        type: 'sysUserDetail/update',
        payload: formData,
      })
    })
  }

  const handleCancel = () => {
    dispatch(routerRedux.push({
      pathname: '/dashboard',
    }))
  }

  const handleChangePassword = () => {
    dispatch({
      type: 'sysUserDetail/updateModalState',
      payload: { modalVisible: true },
    })
  }
  const sexTypeOptions = sexTypeData.map(d => <Option key={d.key}>{d.value}</Option>)


  return (
    <Page inner>

      <Form layout="horizontal">
        <Row>
          <Col span={12}>
            <FormItem label="UserName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('username', {
                initialValue: data.username,
                rules: [
                  {
                    required: true,
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="NickName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('nickname', {
                initialValue: data.nickname,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="LastName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('lastName', {
                initialValue: data.lastName,
                rules: [
                  {
                    required: true,
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="MiddleName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('middleName', {
                initialValue: data.middleName,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="FirstName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('firstName', {
                initialValue: data.firstName,
                rules: [
                  {
                    required: true,
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Phone" hasFeedback {...formItemLayout}>
              {getFieldDecorator('phone', {
                initialValue: data.phone,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="Sex" hasFeedback {...formItemLayout}>
              {getFieldDecorator('sex', {
                initialValue: data.sex,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select >{sexTypeOptions}</Select>)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Telephone" hasFeedback {...formItemLayout}>
              {getFieldDecorator('telephone', {
                initialValue: data.telephone,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="Birthday" hasFeedback {...formItemLayout}>
              {getFieldDecorator('birthday', {
                initialValue: data.birthday ? moment(converDate(data.birthday), dateFormat) : '',
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<DatePicker style={{ width: '100%' }} format={dateFormat} />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Email" hasFeedback {...formItemLayout}>
              {getFieldDecorator('email', {
                initialValue: data.email,
                rules: [
                  {
                    pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
                    message: 'E-mail pattern error!',
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="Status" hasFeedback {...formItemLayout}>
              {getFieldDecorator('status', {
                initialValue: data.status,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<RadioGroup ><Radio value={1}>valid</Radio><Radio value={2}>unvalid</Radio></RadioGroup>)}
            </FormItem>
          </Col>
        </Row>
        <Row className={styles.buttonCenter}>
          <Button size="large" type="ghost" onClick={handleUpdate} className={styles.buttonGutter}>Update</Button>
          <Button size="large" type="ghost" onClick={handleChangePassword} className={styles.buttonGutter}>ChangePassword</Button>
          <Button size="large" type="ghost" onClick={handleCancel} className={styles.buttonGutter}>Cancel</Button>
        </Row>
      </Form>
      {modalVisible && <Modal {...modalProps} />}
    </Page>
  )
}

SysUserDetail.propTypes = {
  sysUserDetail: PropTypes.object,
  location: PropTypes.object,
  form: PropTypes.object.isRequired,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ sysUserDetail, loading }) => ({ sysUserDetail, loading }))(Form.create()(SysUserDetail))
